<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JavaScript 插件</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <script src="js/docs.min.js"></script>
</head>
<body>

<div class="container">
    <h1 class="page-header">
        Bootstrap JavaScript 插件
    </h1>

    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

    <div class="model fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModallabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <p>One fine body&hellip;</p>
                    <div class="row">
                        <div class="col-md-3">
                            <img data-src="holder.js/100%x64" alt="...">
                        </div>
                        <div class="col-md-3">
                            <img data-src="holder.js/100%x64" alt="...">
                        </div>
                        <div class="col-md-3">
                            <img data-src="holder.js/100%x64" alt="...">
                        </div>
                        <div class="col-md-3">
                            <img data-src="holder.js/100%x64" alt="...">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="save">Save changes</button>
                </div>
            </div>
        </div>

    </div>

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
        <li><a href="#profile" data-toggle="tab">Profile</a></li>
        <li><a href="#messages" data-toggle="tab">Messages</a></li>
        <li><a href="#settings" data-toggle="tab">Settings</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane active" id="home">.1..
            <img data-src="holder.js/100%x64" alt="...">
        </div>
        <div class="tab-pane" id="profile">...2
            <img data-src="holder.js/100x64" alt="...">
        </div>
        <div class="tab-pane" id="messages">..3.
            <img data-src="holder.js/100%x64" alt="...">
        </div>
        <div class="tab-pane" id="settings">..4.
            <img data-src="holder.js/100%x64" alt="...">
        </div>
    </div>


</div>

<div class="container">
    <div class="bs-example tooltip-demo">
        <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="" data-original-title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="" data-original-title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
        </p>
    </div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!--&lt;!&ndash; Include all compiled plugins (below), or include individual files as needed &ndash;&gt;-->
<script src="js/bootstrap.min.js"></script>

</body>

<script>
	$('#save').click(function () {
		alert("login success")
		$('#myModal').modal('hide')
	})

	$('#myModal').on('hidden.bs.modal', function (e) {
		$('body').css({
			'background': 'red'
		})
	}).on('show.bs.modal', function (e) {
			$('body').css({
				'background': 'blue'
			})
		})
</script>
</html>